<!--
 * @Author: tom
 * @Date: 2022-09-05 16:21:33
 * @LastEditors: 阿航
 * @LastEditTime: 2022-10-31 11:13:22
 * @FilePath: \shop\src\views\banner\categories.vue
-->
<template>
  <el-breadcrumb :separator-icon="ArrowRight" style="padding: 8px">
    <el-breadcrumb-item :to="{path: '/banner/categories'}"
      >轮播图分类</el-breadcrumb-item
    >
  </el-breadcrumb>
  <el-form :inline="true" :model="queryParams" class="demo-form-inline">
    <el-form-item label="名字">
      <el-input v-model="queryParams.user" placeholder="请输入名字" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>
  </el-form>

  <div style="height: 50px; line-height: 50px">
    <el-button type="primary" @click="editHandle">新增</el-button>
  </div>

  <el-table :data="categoryList" style="width: 100%" border>
    <el-table-column label="序号" type="index" align="center" width="80" />
    <el-table-column prop="name" label="图片名称" align="center" />
    <el-table-column prop="coverImage" label="主图" align="center">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="'http://localhost:1337' + scope.row.coverImage"
        />
      </template>
    </el-table-column>
    <el-table-column prop="desc" label="描述" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" size="small" @click="editHandle(scope.row)"
          >修改</el-button
        >
        <el-button type="danger" size="small" @click="delHandle(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {getBannerCategory, delBannerCategory} from '../../api/banner'
import {ArrowRight} from '@element-plus/icons-vue'
import {ElMessageBox, ElMessage} from 'element-plus'
const categoryList = ref([])

const queryParams = reactive({
  user: '',
  region: '',
  per: '10',
  page: '1',
})

// 获取分类
const getBannerCategoryList = async () => {
  const res = await getBannerCategory(queryParams)
  console.log(res)
  categoryList.value = res.data
}
getBannerCategoryList()

const onSubmit = () => {}

const editHandle = () => {}
const delHandle = (item) => {
  ElMessageBox.confirm('确认要删除吗?', 'Warning', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const res = await delBannerCategory(item.id)
      console.log(res)

      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      getBannerCategoryList()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>
<style scoped></style>
